﻿<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css">

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/vue.js"></script>
<script>
	  window.onload = function(){
		  new Vue({
			  el:'#box',
			  data:{
				 myData:[],
				 username:"",
				 age:"",
				 nowIndex:-100
			  },
			  methods:{
				 add:function(){
					  this.myData.push({
						  username:this.username,
						  age:this.age
					  })
					 this.username="",
					 this.age=""
				 },
				  del:function(n){
					  if(n ==-2){
						  this.myData="";
					  }{
						  this.myData.splice(n,1);
					  }
				  }
			  }
		  })
	  }
</script>

</head>
<body>


	 <table class="table table-bordered table-hover">
		  <caption class="h3 text-info">彩妆信息表</caption>
		 <tr>
			 <th class="text-center">序号</th>
			 <th class="text-center">品牌</th>
			 <th class="text-center">名称</th>
                         <th class="text-center">价格</th>
			 <th class="text-center">操作</th>
		 </tr>
		 <tr class="text-center" v-for="item in myData">
			 <td>F202001</td>
			 <td>欧莱雅</td>
			 <td>欧莱雅洁面霜</td>
                         <td>78.9元</td>
			 <td>
				 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">删除</button>
			 </td>

                 <tr class="text-center" v-for="item in myData">
			 <td>F202002</td>
			 <td>YSL</td>
			 <td>口红</td>
                         <td>249.9元</td>
			 <td>
				 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">删除</button>
			 </td>
<tr class="text-center" v-for="item in myData">
			 <td>F202003</td>
			 <td>兰蔻</td>
			 <td>护肤霜</td>
                         <td>149.9元</td>
			 <td>
				 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">删除</button>
			 </td>
		 </tr>
		 <tr v-show="myData.length!=0">
			 <td colspan="4" class="text-right">
				 <button class="btn btn-danger"  data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">删除全部</button>
			 </td>
		 </tr>
		 <tr v-show="myData.length==0">
			 <td colspan="4" class="text-center text-info">
				 <p>暂无数据...</p>
			 </td>
		 </tr>
	 </table>
	 <!--模态框 弹出框-->
	 <div role="dialog" class="modal fade" id="layer" data-index="{{nowIndex}}">
		  <div class="modal-dialog">
			  <div class="modal-content">
				  <div class="modal-header">
					  <button class="close" data-dismiss="modal">
						  <span>&times;</span>
					  </button>
					  <h4 class="modal-title">确认删除吗？</h4>
				  </div>
				  <div class="modal-body text-right">
					  <button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
					  <button class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="del(nowIndex)">确认</button>
				  </div>
			  </div>
		  </div>
	 </div>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</body>
</html>